<template>
    <div class="zw-unity-kit-cascader">
        <el-cascader
            v-model="value"
            :placeholder="props.placeholder"
            :options="options"
            :disabled="props.disabled"
            :clearable="props.clearable"
            :filterable="props.filterable"
            @change="handleChange">
            <template #empty>
                <div class="el-cascader__empty-text">暂无数据</div>
            </template>
        </el-cascader>
    </div>
</template>
<script lang="ts" setup>
import { computed, getCurrentInstance, watch } from 'vue';
import { ElCascader } from 'element-plus';
import area from '../assets/json/area.json';
import category from '../assets/json/category.json';

const app = getCurrentInstance();

const emit = defineEmits<{
    /**
     * v-model的绑定事件.
     */
    (e: 'update:modelValue', modelValue: boolean): void;
    /**
     * v-model:selected的绑定事件.
     */
    (e: 'change', value: any): void;
}>();

defineOptions({
    name: 'ZwUnityKitCascader',
    inheritAttrs: false
});

// props参数
interface IProps {
    /** v-model绑定的值 */
    modelValue?: any;
    /** 是否禁用 */
    disabled?: boolean;
    /** 类型：area: 地区， category： 类目 */
    type?: 'area' | 'category';
    /** 输入框占用文本 */
    placeholder?: string;
    /** 是否支持清空。 */
    clearable?: boolean;
    /** 是否支持搜索 */
    filterable?: boolean;
}

const props = withDefaults(defineProps<IProps>(), {
    modelValue: undefined,
    /** 是否禁用 */
    disabled: false,
    type: 'area',
    /** 是否支持清空。 */
    placeholder: '请选择',
    clearable: false,
    filterable: true
});

const options = computed(() => {
    if (props.type === 'area') {
        return area;
    }
    return category;
});

/**
 * 级联选择中的值
 */
const value = computed({
    get: () => {
        if (props.type === 'area') {
            return `${props.modelValue}`.split('/') || [];
        } else {
            return [undefined, undefined, `${props.modelValue}`];
        }
    },
    set: val => {
        if (props.type === 'area') {
            emit('update:modelValue', val?.join?.('/'));
        } else {
            emit('update:modelValue', val?.[2]);
        }
    }
});

/**
 * 类型变更时重置v-model的值
 */
watch(
    () => props.type,
    () => {
        emit('update:modelValue', undefined);
    }
);

const handleChange = value => {
    emit('change', value);
};
</script>

<style lang="scss" scoped>
@import './Index';
</style>
